<template>
  <div class="swiper-container">
    <!-- swiper1 -->
    <swiper
      class="swiper gallery-top"
      :key="swiperOptionTopKey"
      :options="swiperOptionTop"
      ref="swiperTop"
    >
      <swiper-slide v-for="item in imgList" :key="item.id">
        <img :src="item.path" />
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev"></div>
    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next"></div>
    <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <!-- swiper2 Thumbs -->
    <swiper
      class="swiper gallery-thumbs"
      :key="swiperOptionThumbsKey"
      :options="swiperOptionThumbs"
      ref="swiperThumbs"
    >
      <swiper-slide v-for="item in imgList" :key="item.id">
        <img :src="item.path" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";
export default {
  name: "swiper-example-thumbs-gallery",
  title: "Thumbs gallery with Two-way control",
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  //   imgList: [],
  props: {
    photoArr: {
      default: [],
    },
  },
  computed: {
    imgList() {
      return this.photoArr.slice(3,8);
    },
  },
  data() {
    return {
      swiperOptionTop: {
        centeredSlides: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        effect : 'fade',
        
      },
      swiperOptionTopKey: Math.random().toString(36).substr(2),
      swiperOptionThumbs: {
        spaceBetween: 10,
        slidesPerView: 5,
        slideToClickedSlide: true,
      },
      swiperOptionThumbsKey: Math.random().toString(36).substr(2),
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.swiperOptionTop.thumbs = {
        swiper: this.$refs.swiperThumbs.$swiper,
        slideThumbActiveClass: "slide-thumb-active",
      };
      this.swiperOptionTopKey = Math.random().toString(36).substr(2); //重新初始化top-swiper
    });
    // console.log(this.imgList);
    // console.log(this.photoArr);
  },
};
</script>
<style scoped  lang="scss">
.swiper-container {
  box-sizing: border-box;
  /* overflow: visible !important; */
  position: relative;
  // height: 600px;
  width: 600px;
}
.swiper-slide img {
  background-color: #fff;
  width: 90%;
  height: 90%;
  object-fit: cover;
}
.gallery-top .swiper-slide {
  height: 600px;
  width: 600px;
  line-height: 600px;
  text-align: center;
}
.gallery-thumbs {
  margin-top: -100px;
  width: 400px;
  display: flex;
  justify-content: space-between;
}
.gallery-thumbs .swiper-slide {
  height: 60px;
  width: 60px;
  opacity: 0.4;
  text-align: center;
  line-height: 60px;
  margin-bottom: 10px;
  img {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    
  }
}
.gallery-thumbs .swiper-slide.slide-thumb-active {
  opacity: 1;
  box-sizing: border-box;
  //   border-radius: 5px;
  //   border: 1px  solid black     ;
  img {
    border: 1px solid black;
    border-radius: 10px;
  }
}
.swiper-button-prev,
.swiper-button-next {
  margin: 0 20px 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.5);
  transition: all 0.5s;
  &::after {
    font-size: 18px;
    color: white;
  }
}
</style>